Figmaの開発モード（Dev mode）のリリース情報のまとめ
2024年2月1日より、Figmaから開発モード（Dev mode）のベータが外れて正式機能としてリリースされました。この記事では、これまでベータ版で使えていた機能と、新しく追加された機能について、公式のドキュメントを中心にまとめています。
この記事のターゲット
Figmaの開発モードについて知りたい方
Figmaの開発モードの2024年2月以降の最新情報が知りたい方
開発モード（Dev mode）について
開発モードは、かつてあったInspectorタブのように、コーディングを行う際のリファレンスやデザイナーとのコミュニケーションを支援するビューの切り替え機能です。
なお、2024年1月31日にオープンベータでの無料提供は終了しており、2024年2月1日からはProfessional以上の有料プランのユーザーが利用できるオプション機能となっています。
公式のヘルプページに日本語の情報もありますので、本記事では詳細な説明は割愛しています。
正式版のリリース情報
今回のリリースに関する詳細な情報については、X（旧Twitter）にてFigma公式アカウント（英語）のポストから引用しています。
日本語での情報については、以下のFigma公式ブログやヘルプページでも解説されていますので参考にしてください。
開発モードの次のステップ：アノテーション、変更内容の比較、プラグインなど - SHORTCUT
開発モードのベータ期間の終了とこれから - Figma Learn
公式からのポスト（意訳）
1. 開発モードの正式リリースの告知、および変更点や新機能に関するブログの紹介
Coming next week: New features in Dev Mode to bring design + dev closer.
— Figma (@figma) January 25, 2024
Annotations (!!), improvements to diffing, plugins, and the VS Code extension.
What's shipping January 31 as Dev Mode moves out of free beta → https://t.co/aOIXilmzQR pic.twitter.com/LreNVso8Bv
2. 開発モードの注釈（Annotate機能）を使用すると、指定したフレームやインスタンスなどに対してプロパティやデザインの指示を記入できる機能が追加されました。
2. Creating a design spec for devs used to take hours.
— Figma (@figma) January 25, 2024
With annotations in Dev Mode, you can add properties and design details with just a few clicks. pic.twitter.com/BG8fOo2QKK
3. フレームやインスタンスなどの要素に対して、クリック＆ドラッグするだけで寸法を追加できる機能が追加されました。
3. Draw measurements the way you’ve wanted.
— Figma (@figma) January 25, 2024
Simply click and drag to add — they’ll stay up to date even as your designs change. pic.twitter.com/gvp8qyS4bo
4. 開発モードの注釈（Annotate機能）はデフォルトで表示されている状態になるため、コメント機能のようにわざわざ開く操作が必要ありません。
4. All the details, crystal clear.
— Figma (@figma) January 25, 2024
Annotations in Dev Mode show up by default and stay attached to your design layers so that they’re immediately seen. pic.twitter.com/zdWpJhdL47
5. 任意の 2 つのフレームを選択して、視覚的にもコード的にも変更を比較できる機能が追加されました。
5. More ways to diff.
— Figma (@figma) January 25, 2024
Compare between any two frames to see what’s changed, both visually and in code. pic.twitter.com/hZRIIaFjIa
6. VS Codeのアプリ内でFigmaの必要なリソースにアクセスしやすくなりました。
6. Get what you need from Figma without leaving VS Code.
— Figma (@figma) January 25, 2024
Dev Mode plugins now run in the VS Code extension. pic.twitter.com/bYu2h6aurM
7. 開発モードのプラグインが自動的に実行されるように設定できるようになりました。プランによっては、この設定を組織全体のユーザーに反映できるようです。
7. Customize Dev Mode with your favorite plugin.
— Figma (@figma) January 25, 2024
You can now set them to run automatically. Or, with Enterprise, do it for your entire organization. pic.twitter.com/QTur7J2fU2
この記事を読んだ方におすすめの記事
FigJamのマインドマップの基本的な使い方
今回は、FigJamの標準機能として追加された「マインドマップ」機能の基本的な使い方を紹介します。マインドマップでは、あるテーマからツリー構造でアイデアを発散しやすく、複数のパターンが存在する状態設計や、テスト設計などに活用できます。 ...
